<template>
	<div class="food">
		<!-- 面包屑 -->
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
				<el-breadcrumb-item>美食管理</el-breadcrumb-item>
				<el-breadcrumb-item>Vip管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="vip-a">
			<!--	搜索框	-->
			<div class="vip-search">
				<div>
					<el-form ref="form" :inline="true" :model="searchForm" label-width="80px" size="medium">
						<el-form-item label="用户名">
							<el-input v-model="searchForm.user_true_name"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="searchSubmit"><i class="el-icon-search"></i> 搜索</el-button>
						</el-form-item>
					</el-form>
				</div>
				<div class="vip-search-right">
					<el-select v-model="searchForm.vip_lv" @change="searchVip" placeholder="请选择" no-data-text="请选择">
						<el-option label="全部" :value="30" :key="0">
						</el-option>
						<el-option v-for="i in options" :label="i.constant_term_meaning" :value="i.constant_term_id" :key="i.constant_term_id">
						</el-option>
					</el-select>
				</div>
			</div>
			<!-- 菜品表格 -->
			<div class="vip-table">
				<el-table
					:data="tableData"
					style="width: 100%">
					<el-table-column
						type="selection"
						width="55px"
						align="center">
					</el-table-column>
					<el-table-column
						prop="vip_id"
						label="vipid"
						sortable>
					</el-table-column>
					<el-table-column
						prop="user_id"
						label="用户id">
					</el-table-column>
					<el-table-column
						prop="start_date"
						label="起始日期"
						sortable>
					</el-table-column>
					<el-table-column
						prop="end_date"
						label="终止日期"
						sortable>
					</el-table-column>
					<el-table-column
						prop="vip_lv"
						label="vip等级"
						:filters="[{ text: 'LV1', value: '1' }, { text: 'LV2', value: '2' }, { text: 'LV3', value: '3' }]"
						:filter-method="filterTag"
						fixed="right"
						width="100px"
						filter-placement="bottom-end">
						<template slot-scope="scope">
							<el-tag
								:type="scope.row.vip_lv%2 == 1 ? 'primary' : 'success'"
								disable-transitions size="small">{{scope.row.vip_lv}}</el-tag>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页相关 -->
			<div class="vip-page">
				<el-pagination
					background
					layout="total, sizes, prev, pager, next, jumper"
					:page-sizes="[5,10,15,20]"
					:current-page="pageNum"
					:total="total"
					:page-size="pageSize"
					@size-change="handleSizeChange"
					@current-change="currentChange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import ConstantService from "@/views/Constant/ConstantService";
	import VipService from "@/views/Vip/VipService";
  export default {
    name: "Vip",
    data(){
      return{
        searchForm:{
          user_true_name:'',
          vip_lv:30
        },
        tableData:[
          {
            vip_id:2,
            vip_lv:1,
	          user_id:1,
            start_date:'2020-01-01',
            end_date:'2020-02-01'
          }
        ],
        options:[],
        total:100,
        pageNum:1,
        pageSize:5,

      }
    },
    methods:{
      //提交搜索表单
      searchSubmit(){
        this.pageNum=1;
        this.searchVip();
      },
      //页面跳转
      currentChange(val){
        this.pageNum=val;
        this.searchVip();
      },
      //搜索方法
      searchVip(){
        console.log(`搜索ing：名称：${this.searchForm.user_true_name}分类：${this.searchForm.vip_lv}当前页：${this.pageNum}`)
        VipService.searchVipService({
	        pageNum:this.pageNum,
	        pageSize:this.pageSize,
	        vip_lv:this.searchForm.vip_lv-30,
	        user_true_name:this.searchForm.user_true_name,
        },r=>{
					this.tableData=r.vip.list;
					this.total=r.vip.total;
        })
      },
      filterTag(value, row) {
        return row.vip_lv == value;
      },
      //页面大小改变
      handleSizeChange(val){
        this.pageSize=val;
        this.pageNum=1;
        this.searchVip();
      },
    },
    created(){
      ConstantService.selectConstantNoPageService({
        constant_term_kind:3
      },r=>{
        this.options=r.searchByConstantTermList;
      });
			this.searchForm.vip_lv=30;
      this.searchForm.user_true_name='';
      this.pageNum=1;
      this.pageSize=5;
			this.searchVip();

    }
  }
</script>

<style lang="less">

	@import '../../style/Common.less';
	.vip-a{
		padding: 20px;
	}
	.vip-search{
		color: #606266;
		font-weight:bold;
		display: flex;
	}
	.vip-buttons{
		display: flex;
		> div{
			margin: 0 12px 20px 12px;
		}
	}
	.vip-table{

	}
	.vip-page{
		height: 32px;
		margin: 20px 20px 20px 0;
		float: right;
	}
	.vip-dialog{
		.vip-dialog-from{
			padding: 0 20px;
		}
	}

	.vip-search-right{
		margin-left: auto;
	}
	.hide .el-upload--picture-card {
		display: none;
	}
</style>